import { useState } from "react";

import "./index.scss";

interface CardType {
  id: number;
}

export default function ExpandingCards() {
  const [actID, setActID] = useState(0);

  const cardList: CardType[] = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
  ];

  return (
    <ul className='expanding-cards'>
      {cardList.map((item: CardType) => (
        <li
          key={item.id}
          onClick={() => {
            setActID(item.id);
          }}
          className={[
            item.id === actID ? "expanding-card-active" : "expanding-card",
          ].join(" ")}
        ></li>
      ))}
    </ul>
  );
}
